<!--#
layout("/layouts/platform.html"){
#-->
<style>
    .el-msg-active {
        background-color: #546478;
        color: #ffffff;
    }
</style>
<div id="app" v-cloak>
    <el-row class="header navbar shadow">
        <div class="btn-group tool-button mt5">
            <a href="${base}/platform/sys/msg/user/all" data-pjax class="el-button el-button--default el-button--medium"
               :class="{'el-msg-active':'all'==pageForm.searchType}">
                全部消息
            </a>
        </div>
        <div class="btn-group tool-button mt5">
            <a href="${base}/platform/sys/msg/user/all/sys" data-pjax
               class="el-button el-button--default el-button--medium"
               :class="{'el-msg-active':'sys'==pageForm.searchType}">
                系统消息<!--<span v-if="unreadnum.sys>0">({{unreadnum.sys}})</span>-->
            </a>
        </div>
        <div class="btn-group tool-button mt5">
            <a href="${base}/platform/sys/msg/user/all/system" data-pjax
               class="el-button el-button--default el-button--medium"
               :class="{'el-msg-active':'system'==pageForm.searchType}">
                公共消息<!--<span v-if="unreadnum.system>0">({{unreadnum.system}})</span>-->
            </a>
        </div>
        <div class="btn-group tool-button mt5">
            <a href="${base}/platform/sys/msg/user/all/user" data-pjax
               class="el-button el-button--default el-button--medium"
               :class="{'el-msg-active':'user'==pageForm.searchType}">
                私人消息<!--<span v-if="unreadnum.user>0">({{unreadnum.user}})</span>-->
            </a>
        </div>
        <div class="btn-group tool-button mt5">
            <el-input placeholder="标题" v-trim v-model="pageForm.title" auto-complete="off" tabindex="2" type="text" size="medium"></el-input>
        </div>
        <div class="btn-group tool-button mt5">
            <el-button slot="append" icon="el-icon-search" size="mini" @click="doSearch" circle></el-button>
        </div>
        <div class="pull-right offscreen-right mt5">
            <el-button size="medium" @click="readMore" :disabled="selectData.length==0">标记已读</el-button>
            <el-button size="medium" @click="readAll" :disabled="tableData.length==0">全部已读</el-button>
            <el-button size="medium" @click="delMore" type="danger" :disabled="selectData.length==0"><i class="el-icon-delete"></i>删除</el-button>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table
                :data="tableData"
                @sort-change='pageOrder'
                size="small"
                header-align="center"
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection" :selectable="selectable"
                    width="35">
            </el-table-column>
            <el-table-column
                    prop="status"
                    width="45">
                <template slot-scope="scope">
                    <span v-if="0==scope.row.status"><i class="fa fa-circle text-info ml5"></i></span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="信息类型"
                    header-align="center" align="center" width="120">
                <template slot-scope="scope">
                    <span v-if="'system'==scope.row.type">公共消息</span>
                    <span v-else-if="'user'==scope.row.type">私人消息</span>
                    <span v-else>{{scope.row.type}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    sortable
                    prop="msgtype"
                    label="通知类型"
                    header-align="center" align="center">
                <template slot-scope="scope">
                    <span v-if="'0'==scope.row.msgtype">通知公告</span>
                    <span v-else-if="'1'==scope.row.msgtype">规章制度</span>
                    <span v-else-if="'2'==scope.row.msgtype">设备资料</span>
                    <span v-else-if="'3'==scope.row.msgtype">知识资料</span>
                    <span v-else>{{scope.row.msgtype}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    header-align="center"
                    :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <a style="color: #0e78c5;" v-if="scope.row.id" :href="'${base}/platform/sys/msg/user/all/detail/'+scope.row.msgid" data-pjax><span v-html="scope.row.title" /></a>
                    <a style="color: #0e78c5;" v-else :href="'${base}'+scope.row.url" data-pjax><span v-html="scope.row.title" /></a>
                </template>
            </el-table-column>

            <el-table-column
                    prop="opat"
                    label="接收时间"
                    header-align="center" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.id">{{formatAt(scope.row.opat)}}</span>
                    <span v-else>{{scope.row.time}}</span>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

    <el-row class="el-pagination-container">
        <el-pagination
                style="float: left"
                @size-change="pageSizeChange"
                @current-change="pageNumberChange"
                :current-page="pageForm.pageNumber"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageForm.totalCount">
        </el-pagination>
    </el-row>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                addDialogVisible: false,
                editDialogVisible: false,
                selectDialogVisible: false,
                viewDialogVisible: false,
                tableData: [],
                pageForm: {
                    searchType: "${type!}",
                    title: "",
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0,
                    pageOrderName: "opAt",
                    pageOrderBy: "descending"
                },
                formData: {
                    id: "",
                    type: "system"
                },
                selectData: [],
                unreadnum: {
                    system: 0,
                    user: 0
                }
            }
        },
        methods: {
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            doSearch: function (val) {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/sys/msg/user/data/all", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            formatAt: function (val) {
                if (val && val > 0)
                    return moment(val * 1000).format("YYYY-MM-DD HH:mm");
                return "";
            },
            handleSelectionChange: function (val) {
                this.selectData = val;
            },
            unreadData: function () {//加载分页数据
                var self = this;
                $.post(base + "/platform/sys/msg/user/unread_num", {}, function (data) {
                    if (data.code == 0) {
                        self.unreadnum = data.data;
                    }
                }, "json");
            },
            readMore: function () {
                var self = this;
                if (self.selectData.length == 0) {
                    self.$message({
                        message: "请选择信息",
                        type: 'warning'
                    });
                    return false;
                }
                var ids = [];
                self.selectData.forEach(function (val) {
                    ids.push(val.id);
                });
                self.$confirm('您确定要标记选中的 '+ids.length+' 条信息为已读吗？ ', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    callback: function (a, b) {
                        if ("confirm" == a) {//确认后再执行
                            $.post(base + "/platform/sys/msg/user/status/read", {ids: ids.toString()}, function (data) {
                                if (data.code == 0) {
                                    self.$message({
                                        message: data.msg,
                                        type: 'success'
                                    });
                                    self.pageData();
                                    self.unreadData();
                                } else {
                                    self.$message({
                                        message: data.msg,
                                        type: 'error'
                                    });
                                }
                            }, "json");
                        }
                    }
                });
            },
            readAll: function () {
                var self = this;
                self.$confirm('您确定要标记全部信息为已读吗？ ', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    callback: function (a, b) {
                        if ("confirm" == a) {//确认后再执行
                            $.post(base + "/platform/sys/msg/user/status/readAll", {}, function (data) {
                                if (data.code == 0) {
                                    self.$message({
                                        message: data.msg,
                                        type: 'success'
                                    });
                                    self.pageData();
                                    self.unreadData();
                                } else {
                                    self.$message({
                                        message: data.msg,
                                        type: 'error'
                                    });
                                }
                            }, "json");
                        }
                    }
                });
            },
            delMore: function () {
                var self = this;
                if (self.selectData.length == 0) {
                    self.$message({
                        message: "请选择信息",
                        type: 'warning'
                    });
                    return false;
                }
                var ids = [];
                self.selectData.forEach(function (val) {
                    ids.push(val.id);
                });
                self.$confirm('您确定要删除选中的 '+ids.length+' 条信息？ ', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    callback: function (a, b) {
                        if ("confirm" == a) {//确认后再执行
                            $.post(base + "/platform/sys/msg/user/delete", {ids: ids.toString()}, function (data) {
                                if (data.code == 0) {
                                    self.$message({
                                        message: data.msg,
                                        type: 'success'
                                    });
                                    self.pageData();
                                    self.unreadData();
                                } else {
                                    self.$message({
                                        message: data.msg,
                                        type: 'error'
                                    });
                                }
                            }, "json");
                        }
                    }
                });
            },//判断勾选
            selectable(row, index) {
                var res = true;
                if (!row.id){
                    res = false; // 禁用
                }
                return res;
            },
        },
        created: function () {
            this.doSearch();
            this.unreadData();
        }
    });
</script>
<!--#
}
#-->
